/* Copyright (C) Microsoft Corporation. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

 html,
 body {
   height: 100vh; /* fullscreen */
   width: 100vw; /* fullscreen */
   margin: 0;
   padding: 0;
   overflow: hidden;
   user-select: none;
 }
 
 #start-window,
 #interface,
 #game-canvas,
 #water,
 #gradient,
 #frost {
   display: block;
   position: absolute;
   height: 100vh; /* fullscreen */
   width: 100vw; /* fullscreen */
   top: 0;
   left: 0;
 }
 
 #start-window {
   color: #fff;
   font-family: "Press Start 2P", monospace;
   text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
   background: linear-gradient(
     0deg,
     rgba(46, 195, 208, 1) 0%,
     rgba(56, 194, 238, 1) 100%
   );
 }
 
 #start-window h1 {
   display: block;
   position: relative;
   margin: 0;
   padding: 0;
   font-size: 32px;
   top: 30%;
   text-align: center;
 }
 
 .fade {
   opacity: 0;
   transition: opacity 0.4s ease-in-out;
 }
 
 #loader {
   display: block;
   position: relative;
   width: 48px;
   height: 48px;
   left: 50%;
   top: 30%;
   margin: 48px 0 0 -24px;
 }
 
 #radial {
   fill: none;
   stroke: #ffffff;
   stroke-width: 2px;
   stroke-linecap: round;
   transform-origin: 50% 50%;
   transform: rotate(-90deg); /* starts animation at top */
   animation: spin-infinite 2.5s linear infinite;
 }
 
 #radial-bg {
   fill: none;
   stroke: rgba(0, 0, 0, 0.18);
   stroke-width: 2px;
   stroke-linecap: round;
 }
 
 @keyframes spin-infinite {
   0% {
     stroke-dasharray: 0.01px 43.97px;
     transform: rotate(0deg);
   }
   50% {
     stroke-dasharray: 21.99px 21.99px;
     transform: rotate(450deg);
   }
   100% {
     stroke-dasharray: 0.01px 43.97px;
     transform: rotate(1080deg);
   }
 }
 
 /* canvas */
 
 #game-canvas {
   image-rendering: pixelated; /* important */
 }
 
 #water {
   background-image: url("");
   background-size: 256px 256px;
   background-repeat: repeat;
 }
 
 /* win modal */
 
 #win-modal,
 #credit-modal {
   position: absolute;
   display: block;
   top: 50%;
   left: 50%;
   width: 500px;
   height: 420px;
   padding: 40px;
   background-color: #f2f2f2;
   font-family: system-ui, sans-serif;
   font-size: 60px;
   border-radius: 4px;
   box-shadow: 0px 4.8px 14.4px rgba(0, 0, 0, 0.18),
     0px 25.6px 57.6px rgba(0, 0, 0, 0.22);
   background: #fff;
   transform: translate(-50%, -50%) scale(0.98);
   opacity: 0;
   transition-timing-function: cubic-bezier(0.3, 0.2, 0.2, 1);
   transition: transform 0.35s, opacity 0.35s;
 }
 
 #win-modal.fade,
 #credit-modal.fade {
   transform: translate(-50%, -50%) scale(1);
   opacity: 1;
   transition-timing-function: cubic-bezier(0.3, 0.2, 0.2, 1);
   transition: transform 0.35s, opacity 0.35s;
 }
 
 #frost {
   background-color: rgba(255, 255, 255, 0);
   transition-timing-function: cubic-bezier(0.3, 0.2, 0.2, 1);
   transition: background-color 0.35s;
 }
 
 #frost.visible {
   background-color: rgba(255, 255, 255, 0.95);
   transition-timing-function: cubic-bezier(0.3, 0.2, 0.2, 1);
   transition: background-color 0.35s;
 }
 
 #edmonds-close {
   position: absolute;
   top: 0;
   right: 0;
   padding: 12px;
   background: none;
   color: inherit;
   border: none;
   cursor: pointer;
   outline: inherit;
 }
 
 #edmonds-close line {
   stroke-width: 1px;
   stroke: #666666;
 }
 
 #edmonds-logo {
   display: block;
   margin: 40px auto 0px auto;
 }
 
 #edmonds-title {
   margin-top: 40px;
   font-size: 28px;
   text-align: center;
 }
 
 #edmonds-text table {
   margin-left: auto;
   margin-right: auto;
   font-size: 15px;
 }
 
 #edmonds-text table td {
   padding: 0 10px;
   width: 50%;
 }
 
 #edmonds-text table tr td:last-of-type {
   text-align: start;
 }
 
 #edmonds-text table tr td:first-of-type {
   text-align: end;
 }
 
 #credits-title {
   margin: 0px;
   font-size: 28px;
   text-align: center;
 }
 
 #special-thanks {
   font-size: 15px;
   margin-bottom: 4px;
   font-weight: normal;
 }
 
 #edmonds-text {
   font-size: 20px;
   text-align: center;
   margin: 30px 0;
 }
 
 #credit-modal #edmonds-text {
   font-size: 20px;
   line-height: 22px;
   text-align: center;
   margin: 20px 0;
 }
 
 #edmonds-cta {
   display: block;
   margin: 40px auto 0px auto;
   font-size: 14px;
   line-height: 40px;
   text-align: center;
   color: #ffffff;
   width: 240px;
   height: 40px;
   background-color: #0078d4;
   border-radius: 2px;
   border: none;
   cursor: pointer;
   outline: inherit;
 }
 
 /* interface */
 
 #interface {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   font-family: "Press Start 2P", monospace;
 }
 
 #stats {
   width: 120px;
   margin: 36px 0 0 36px;
   image-rendering: pixelated;
 }
 
 #distance,
 #lives,
 #powerups,
 #shields {
   position: relative;
   z-index: 0;
   display: flex;
   flex-grow: 1;
   flex-wrap: wrap;
   justify-content: left;
 }
 
 #distance {
   width: 68px;
   height: 16px;
   margin: 4px 2px;
   border: 2px solid black;
   overflow: hidden;
   position: relative;
 }
 
 #counter {
   text-align: center;
   font-size: 8px;
   line-height: 16px;
   width: 68px;
   height: 16px;
   z-index: 1;
 }
 
 #bar-fill {
   position: absolute;
   left: 0px;
   width: 0px;
   height: 16px;
   background: white;
   z-index: -1;
 }
 
 #lives,
 #powerups,
 #shields {
   width: 96px;
   height: 24px;
   margin: 2px;
 }
 
 .icon {
   width: 24px;
   height: 24px;
   background-image: url("");
   background-size: 48px 96px;
 }
 
 .life-empty {
   background-position: 0 0;
 }
 .life-full {
   background-position: -24px 0;
 }
 .powerup-empty {
   background-position: 0 -24px;
 }
 .powerup-full {
   background-position: -24px -24px;
 }
 .shield {
   background-position: -24px -48px;
 }
 .icon.powerup-small {
   display: inline-block;
   background-position: -18px -18px;
   width: 18px;
   height: 18px;
   background-size: 36px 72px;
 }
 
 .icon.life-small {
   display: inline-block;
   background-position: -18px 0;
   width: 18px;
   height: 18px;
   background-size: 36px 72px;
 }
 
 .icon.shield-small {
   display: inline-block;
   background-position: -18px -36px;
   width: 18px;
   height: 18px;
   background-size: 36px 72px;
 }
 
 .icon.buttons-small {
   display: inline-block;
   background-position: 0px -54px;
   width: 18px;
   height: 18px;
   background-size: 36px 72px;
 }
 
 .icon.counter-small {
   display: inline-block;
   background-position: -18px -54px;
   width: 18px;
   height: 18px;
   background-size: 36px 72px;
 }
 
 .infinite {
   background-position: 0 -54px;
 }
 
 #title {
   flex: 1;
   margin: 12px auto 0 auto;
 }
 
 #main {
   margin-top: 28px;
   text-align: center;
   font-size: 32px;
   line-height: 36px;
 }
 
 #cta {
   margin-top: 32px;
   text-align: center;
   font-size: 12px;
   line-height: 20px;
 }
 
 #debug {
   width: 120px;
   margin: 12px 12px 0 0;
   font-size: 8px;
   text-align: right;
 }
 
 #select {
   position: absolute;
   top: 33.33%;
   left: 50%;
   margin: -48px 0 0 -48px;
   width: 92px;
   height: 92px;
 }
 
 #selector {
   width: 100%;
   height: 100%;
   border: 2px solid black;
 }
 
 #arrow-left {
   position: absolute;
   top: 28px;
   left: -36px;
 }
 
 #arrow-right {
   position: absolute;
   top: 28px;
   right: -40px;
 }
 
 #info {
   position: absolute;
   width: 100%;
   top: 33.33%;
   left: 50%;
   margin: 96px 0 0 -50%;
   text-align: center;
   line-height: 20px;
 }
 
 #info h2 {
   font-size: 16px;
 }
 
 #info p {
   font-size: 12px;
   line-height: 18px;
   margin: 4px 0;
 }
 
 #cta span {
   padding: 4px 4px 2px 4px;
   border: 2px solid black;
   background-color: rgba(255, 255, 255, 0.2);
   font-size: 16px;
 }
 